<template>
    <div class="water-gateway">
        <Tabs type="card" :animated="false">
            <TabPane label="水表采集器">
                <Card class="water-gateway-base" dis-hover :padding='0'>
                    <p slot='title'>
                        基本信息
                    </p>
                    <Row class='water-gateway-base-row'>
                        <Col span='8' class='water-gateway-base-row-item'>
                            <Row type='flex' align='middle' class='water-gateway-base-row-item-line'>
                                <strong>基本信息</strong>
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <i>名称：</i>
                                <Input style='width:50%' v-model='room.description' :readonly='edit'></Input>
                                <Button type='ghost' class="margin-left-10 yd-button" v-show='edit==true' @click='edit=!edit' v-pmis="23">修改</Button>
                                <Button class=" margin-left-10 yd-button" v-show='edit==false' @click='ok'>保存</Button>
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <i>序列号:</i>
                                {{room.sn}}
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <i>uuid：</i>
                                {{room.uuid}}
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <i>状态：</i>
                                <span class="margin-right-10">{{room.onoff == 1?'在线':'离线'}}</span>（更新时间:{{room.onoff_time | dateFrm}}）
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <i>型号：</i>
                                {{room.type || '-'}}
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <i>绑定时间：</i>
                                {{room.bind_time | dateFrm}}
                            </Row>
                        </Col>
                        <Col span='8' class='water-gateway-base-row-item' style='border-right:none'>
                            <Row type='flex' align='middle' class='water-gateway-base-row-item-line'>
                                <strong>保修信息</strong>
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <strong>保修起始时间：</strong>
                                {{room.guarantee_begin}}
                            </Row>
                            <Row class='water-gateway-base-row-item-line'>
                                <strong>保修截止时间：</strong>
                                {{room.guarantee_end}}
                            </Row>
                        </Col>
                    </Row>
                </Card>
            </TabPane>
            <TabPane label="关联设备">
                <correlation :room="room" :correlationDevice="'water_gateway'"></correlation>
            </TabPane>
            <TabPane label="操作记录">
                <roomOperate :room="room" :operateType="'water_gateway'"></roomOperate>
            </TabPane>
            <TabPane label="异常记录">
                <roomUnnormal :room="room" :unnormalType="'WATERGATEWAY'"></roomUnnormal>
            </TabPane>
        </Tabs>
    </div>
</template>
<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import dayjs from 'dayjs'
import roomUnnormal from './roomUnnormal'
import roomOperate from './roomOperate'
import correlation from './correlation'
import { refreshRoom } from './room-list/util'

export default {
  name: 'water_gateway',
  props: {
    homeId: Number,
    room: Object
  },
  components: {
    roomUnnormal,
    roomOperate,
    correlation
  },
  data () {
    return {
      edit: true,
      cutout: false,
      clear: false,
      recharge: false,
      restclean: false,
      water_gatewayset: false,
      partition: false,
      water_gateway: {}
    }
  },
  computed: {
    permissions () {
      if (localStorage.permission) {
        return JSON.parse(localStorage.permission)
      } else {
        return {}
      }
    }
  },
  methods: {
    ok () {
      this.edit = !this.edit
      let room = this.room
      http.request(this, api.device_update, [room.roomId, room.id], { description: this.room.description }, (res, err) => {
        if (!res || err) {
          return
        }
        refreshRoom(this.homeId, room.roomId)
        this.$Message.success('修改成功')
      })
    }
  },
  filters: {
    dateFrm: function (el) {
      if (el === -1 || !el) {
        return ' - '
      }
      return dayjs(el).format('YYYY-MM-DD HH:mm:ss')
    },
    dateFrm2 (el) {
      return dayjs(el)
        .add(2, 'years')
        .format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang='less' scoped>
@import '../../styles/common.less';
.ivu-row {
    position: static;
}
.water-gateway {
    &-base {
        background-color: #fff;
        &-row {
            padding: 10px 0;
            &-item {
                border-right: 1px solid #bbbec4;
                &-line {
                    padding: 15px 0 5px 20px;
                    font-size: 14px;
                    color: #000000;
                }
            }
            &-action {
                padding: 9px 0 5px 20px;
                &-button {
                    width: 100px;
                    margin-right: 5px;
                }
            }
        }
    }
}
i{
    font-style:normal
}
</style>